<template>
  <el-form style="margin-bottom: 10px" label-width="120" v-if="searchOptions && searchOptions.length">
    <el-row>
      <template v-for="(item, index) in searchOptions">
        <el-col :span="searchCount === 2 ? 7 : 5" v-if="index < searchCount">
          <common-element v-bind="item" v-model="queryParams[item.prop]"/>
        </el-col>
      </template>
      <el-col :span="1" :offset="1" v-if="searchOptions.length > searchCount">
        <div style="display: flex;justify-content: center;align-items: center;cursor: pointer" @click="searchClose = !searchClose">
          <el-icon>
            <ArrowLeft v-if="searchClose"/>
            <ArrowDown v-else/>
          </el-icon>{{searchClose ? '收起' : '展开'}}
        </div>
      </el-col>
      <el-col :span="1" :offset="1">
        <common-button v-bind="buttonConfirm" @click="emit('search')" type="primary"/>
      </el-col>
      <el-col :span="1" :offset="1">
        <common-button v-bind="buttonReset" @click="resetQuery"/>
      </el-col>
      <template v-for="(item, index) in searchOptions">
        <el-col :span="searchCount === 2 ? 7 : 5" v-if="index >= searchCount && !searchClose">
          <common-element v-bind="item" v-model="queryParams[item.prop]"/>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import {ArrowDown, ArrowLeft} from "@element-plus/icons-vue"
import CommonButton from "./CommonButton.vue"
import CommonElement from "./CommonElement.vue"
import {computed, defineEmits, defineModel, defineProps} from "vue"
import {ElCol, ElForm, ElIcon, ElRow} from "element-plus";
const props = defineProps({
  buttonConfirm: {
    type: Object,
    default: {label: '搜索', className: '', isShow: true}
  },
  buttonReset: {
    type: Object,
    default: {label: '重置', className: '', isShow: true}
  },
  options: {
    type: Array<{isShow:boolean|undefined, prop:string|undefined}>,
    default: []
  },
  rowCount: {
    type: Number,
    default: 2
  },
})
const queryParams = defineModel()
const searchClose = defineModel('searchClose')
const emit = defineEmits(['search'])
const searchCount = computed(() => {
  return props.rowCount === 3 ? 3 : 2
})
const searchOptions = computed(() => {
  return props.options.filter(item => item.isShow === undefined || item.isShow)
})

function  resetQuery() {
  for (let valueKey in queryParams.value) {
    delete queryParams.value[valueKey]
  }
  emit('search')
}
</script>
